<template>
    <div>
        <div style="height:calc(100vh - 100px);">
            <SeeksRelationGraph
                ref="seeksRelationGraph"
                :options="graphOptions"
                :on-node-click="onNodeClick"
                :on-line-click="onLineClick"
            />
        </div>
    </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
export default {
    name: 'Demo',
    components: { SeeksRelationGraph },
    data() {
        return {
            nodes: [],
            links: [],
            data: [{
                "id": 3,
                "text": '一级 3',
                "children": [{
                    "id": 7,
                    "text": '二级 3-1'
                }, {
                    "id": 8,
                    "text": '二级 3-2',
                    "children": [{
                        "id": 11,
                        "text": '三级 3-2-1'
                    }, {
                        "id": 12,
                        "text": '三级 3-2-2'
                    }, {
                        "id": 13,
                        "text": '三级 3-2-3'
                    }]
                }]
            }],
            currentCase: '横向树状图谱',
            isShowCodePanel: false,
            graphOptions: {
                "backgrounImageNoRepeat": true,
                "defaultLineWidth": 5, // 线条宽度
                "defaultNodeShape": 1,
                "defaultNodeBorderWidth": 0,
                "defaultLineShape":  "",
                "layouts": [
                    {
                        "label": "中心",
                        "layoutName": "tree",
                        "layoutClassName": "seeks-layout-center",
                        "defaultJunctionPoint": "border",
                        "defaultNodeShape": 0,
                        "defaultLineShape": 1,

                    }
                ],
                "defaultLineMarker": {
                    "markerWidth": 12,
                    "markerHeight": 12,
                    "refX": 6,
                    "refY": 6,
                    // "data": "M2,2 L10,6 L2,10 L6,6 L2,2" // 箭头形状
                },

            }
        }
    },
    created() {

    },
    mounted() {
        this.nodes = this.handleTreeData(this.data)
        this.links = this.handleLinks(this.nodes)
        console.log(this.nodes);
        console.log(this.links);
        this.showSeeksGraph()
    },
    methods: {
        handleTreeData(data, pid = null, res = []) {
            data.forEach(item => {
                res.push({...item, ...{pid}})
                if (item.children && item.children.length > 0) {
                    this.handleTreeData(item.children, item.id, res)
                }
            })
            res.forEach(item => {
                delete item.children
            })
            return res
        },
        handleLinks(arr) {
            let links = []
            arr.forEach(item => {
                arr.forEach(sub => {
                    if (item.id == sub.pid) {
                       links.push({"from": item.id.toString(), "to": sub.id.toString()})
                    }
                })
            })
            return links
        },
        showSeeksGraph(query) {
            var __graph_json_data = {

                    'nodes':
                    this.nodes
                        // [
                    //     {id: 1, text: '子公司',},
                    //     {id: 2, text: '贵州茅台酒销售'},
                    //     {id: 3, text: '贵州茅台酒巴黎贸易司'},
                    //     {id: 4, text: '贵州赖茅酒业' },
                    //     {id: 5, text: '贵州茅台酱香酒营销' },
                    //     {id: 6, text: '北京友谊使者商贸'},
                    //     {id: 7, text: '贵州茅台酒进出口',},
                    //     {id: 8, text: '贵州茅台集团财务' },
                    //     {id: 9, text: '国酒茅台定制营销'},
                    //     {id: 10, text: '方案1' },
                    //     {id: 11, text: '方案2' },
                    //     ]
                ,
                    'links': this.links
                    //     [
                    //     { 'from': '1', 'to': '2' },
                    //     { 'from': '1', 'to': '3' },
                    //     { 'from': '1', 'to': '3' },
                    //     { 'from': '1', 'to': '4' },
                    //     { 'from': '1', 'to': '5' },
                    //     { 'from': '1', 'to': '6' },
                    //     { 'from': '1', 'to': '7' },
                    //     { 'from': '1', 'to': '9' },
                    //     { 'from': '1', 'to': '8' },
                    //     { 'from': '6', 'to': '10' },
                    //     { 'from': '7', 'to': '10' },
                    //     { 'from': '8', 'to': '10' },
                    //     { 'from': '4', 'to': '11' },
                    //     { 'from': '5', 'to': '11' },
                    //     { 'from': '7', 'to': '11' },
                    // ]
                }
            this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
                // 这些写上当图谱初始化完成后需要执行的代码
            })
        },
        onNodeClick(nodeObject, $event) {
            console.log('onNodeClick:', nodeObject)
        },
        onLineClick(lineObject, $event) {
            console.log('onLineClick:', lineObject)
        }
    }
}
</script>

<style lang="scss">
</style>
